<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题反馈 - 科普小站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',      // 主色调：科技蓝
                        secondary: '#4f46e5',    // 辅助色：靛蓝色
                        accent: '#0ea5e9',       // 强调色：亮蓝色
                        neutral: '#64748b',      // 中性色：石板灰
                        light: '#f1f5f9',        // 浅色背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .feedback-option {
                @apply border border-gray-200 rounded-xl p-6 cursor-pointer transition-all duration-200 hover:border-primary hover:bg-primary/5;
            }
            .feedback-option-selected {
                @apply border-primary bg-primary/10 ring-2 ring-primary/20;
            }
            .section-fade-in {
                @apply opacity-0 transform translate-y-8 transition-all duration-700;
            }
            .section-visible {
                @apply opacity-100 translate-y-0;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-gray-800">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-flask text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold ml-2">科普小站</h1>
                </a>
            </div>

            <nav class="hidden md:flex items-center space-x-1">
                <a href="#" class="nav-link">首页</a>
                <a href="#" class="nav-link">科普知识</a>
                <a href="#" class="nav-link">互动问答</a>
                <a href="#" class="nav-link">关于我们</a>
                <a href="#" class="nav-link nav-link-active font-medium text-primary">问题反馈</a>
            </nav>

            <div class="flex items-center">
                <button class="md:hidden text-gray-600" id="menu-toggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="hidden md:flex items-center ml-4">
                    <button class="text-gray-600 hover:text-gray-900 mr-4">
                        <i class="fa fa-search text-xl"></i>
                    </button>
                    <div class="relative">
                        <button class="flex items-center">
                            <i class="fa fa-user-circle-o text-gray-600 text-xl"></i>
                            <span class="ml-2">登录</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 移动端菜单 -->
<div class="fixed inset-0 bg-white z-40 transform translate-x-full transition-transform duration-300 md:hidden" id="mobile-menu">
    <div class="p-4 border-b flex justify-between items-center">
        <h2 class="text-xl font-bold">菜单</h2>
        <button id="menu-close"><i class="fa fa-times"></i></button>
    </div>
    <div class="p-4 space-y-3">
        <a href="#" class="block py-2 hover:text-primary">首页</a>
        <a href="#" class="block py-2 hover:text-primary">科普知识</a>
        <a href="#" class="block py-2 hover:text-primary">互动问答</a>
        <a href="#" class="block py-2 hover:text-primary">关于我们</a>
        <a href="#" class="block py-2 text-primary font-medium">问题反馈</a>
        <div class="border-t border-gray-200 my-2 pt-2">
            <a href="#" class="block py-2 hover:text-primary">登录</a>
            <a href="#" class="block py-2 hover:text-primary">注册</a>
        </div>
    </div>
</div>

<!-- 页面头部 -->
<section class="bg-gradient-to-br from-primary/10 to-secondary/10 py-16 md:py-24">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-900 mb-4 section-fade-in">
                问题反馈
            </h1>
            <p class="text-lg text-gray-600 mb-8 section-fade-in" style="transition-delay: 0.2s">
                我们重视您的每一条反馈，这将帮助我们不断改进科普小站的内容和服务
            </p>
            <div class="flex justify-center section-fade-in" style="transition-delay: 0.4s">
                <a href="#feedback-form" class="btn-primary">
                    <i class="fa fa-paper-plane mr-2"></i>提交反馈
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 反馈表单 -->
<section id="feedback-form" class="py-16 bg-light">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-sm p-8 md:p-12 section-fade-in">
                <h2 class="text-2xl md:text-3xl font-bold mb-6">发送反馈</h2>
                <p class="text-gray-600 mb-8">请选择反馈类型并详细描述您遇到的问题或建议，我们将尽快回复您。</p>

                <form id="feedback-form" class="space-y-8">
                    <!-- 反馈类型选择 -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4">选择反馈类型</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="feedback-option" data-type="content-error">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
                                        <i class="fa fa-exclamation-triangle text-red-500"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-sm font-medium text-gray-900">内容错误</h4>
                                        <p class="text-xs text-gray-500 mt-1">指出科普内容中的事实性错误或不准确信息</p>
                                    </div>
                                </div>
                            </div>

                            <div class="feedback-option" data-type="content-suggestion">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                        <i class="fa fa-lightbulb-o text-blue-500"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-sm font-medium text-gray-900">内容建议</h4>
                                        <p class="text-xs text-gray-500 mt-1">对现有内容提出改进建议或推荐新的科普主题</p>
                                    </div>
                                </div>
                            </div>

                            <div class="feedback-option" data-type="function-problem">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
                                        <i class="fa fa-cog text-yellow-500"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-sm font-medium text-gray-900">功能问题</h4>
                                        <p class="text-xs text-gray-500 mt-1">报告网站功能异常或提出功能改进建议</p>
                                    </div>
                                </div>
                            </div>

                            <div class="feedback-option" data-type="other">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                                        <i class="fa fa-ellipsis-h text-gray-500"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-sm font-medium text-gray-900">其他问题</h4>
                                        <p class="text-xs text-gray-500 mt-1">不属于以上类别的其他反馈</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="feedback-type-input" name="feedbackType">
                    </div>

                    <!-- 反馈详情 -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4">反馈详情</h3>
                        <div class="mt-2">
                            <textarea rows="5" id="feedback-details" name="details" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="请详细描述您的反馈内容..."></textarea>
                        </div>
                    </div>

                    <!-- 相关链接 -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4">相关链接</h3>
                        <div class="mt-2">
                            <input type="text" id="feedback-url" name="url" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="如果有相关页面URL，请在此输入">
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div>
                        <h3 class="text-lg font-semibold mb-4">联系方式</h3>
                        <div class="mt-2">
                            <input type="text" id="contact-info" name="contact" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus" placeholder="请留下您的邮箱或其他联系方式，以便我们回复您">
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="flex justify-center pt-4">
                        <button type="submit" class="btn-primary w-full md:w-auto">
                            <i class="fa fa-paper-plane mr-2"></i>提交反馈
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- 常见问题 -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center section-fade-in">常见问题</h2>

            <div class="space-y-4" id="faq-container">
                <div class="border border-gray-200 rounded-lg overflow-hidden section-fade-in">
                    <button class="faq-toggle w-full flex items-center justify-between p-4 text-left font-medium hover:bg-gray-50 transition-colors">
                        <span>如何查看我的反馈状态？</span>
                        <i class="fa fa-angle-down text-gray-500 transition-transform"></i>
                    </button>
                    <div class="faq-content px-4 pb-4 hidden">
                        <p class="text-gray-600">提交反馈后，您可以通过预留的联系方式接收我们的回复。如果您已注册账号，也可以在个人中心的"我的反馈"页面查看反馈状态和回复。</p>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg overflow-hidden section-fade-in" style="transition-delay: 0.1s">
                    <button class="faq-toggle w-full flex items-center justify-between p-4 text-left font-medium hover:bg-gray-50 transition-colors">
                        <span>我的反馈会在多久内得到回复？</span>
                        <i class="fa fa-angle-down text-gray-500 transition-transform"></i>
                    </button>
                    <div class="faq-content px-4 pb-4 hidden">
                        <p class="text-gray-600">我们承诺在24小时内对您的反馈进行响应，复杂问题可能需要更长时间。我们会尽力提供最专业的回复和解决方案。</p>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg overflow-hidden section-fade-in" style="transition-delay: 0.2s">
                    <button class="faq-toggle w-full flex items-center justify-between p-4 text-left font-medium hover:bg-gray-50 transition-colors">
                        <span>如何提供更有效的反馈？</span>
                        <i class="fa fa-angle-down text-gray-500 transition-transform"></i>
                    </button>
                    <div class="faq-content px-4 pb-4 hidden">
                        <p class="text-gray-600">为了帮助我们更好地理解和解决您遇到的问题，请尽可能详细地描述您的反馈，包括具体页面、操作步骤、问题表现等信息。如有可能，附上截图或相关链接将更有助于问题的解决。</p>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg overflow-hidden section-fade-in" style="transition-delay: 0.3s">
                    <button class="faq-toggle w-full flex items-center justify-between p-4 text-left font-medium hover:bg-gray-50 transition-colors">
                        <span>我可以对已提交的反馈进行修改吗？</span>
                        <i class="fa fa-angle-down text-gray-500 transition-transform"></i>
                    </button>
                    <div class="faq-content px-4 pb-4 hidden">
                        <p class="text-gray-600">如果您已注册账号并在登录状态下提交的反馈，可以在个人中心对未处理的反馈进行修改。如果您是匿名提交的反馈，建议您补充新的反馈说明情况。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center mb-4">
                    <i class="fa fa-flask text-primary text-2xl"></i>
                    <h3 class="text-xl font-bold ml-2">科普小站</h3>
                </div>
                <p class="text-gray-400 mb-4">致力于传播科学知识，激发探索精神，提升科学素养</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-youtube-play"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">科普知识</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">互动问答</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">问题反馈</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">热门主题</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">宇宙探索</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">生命科学</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">前沿科技</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">环境保护</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">能源研究</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2">
                    <li class="flex items-start">
                        <i class="fa fa-envelope-o text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">contact@science.example.com</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-phone text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">400-123-4567</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-map-marker text-gray-400 mr-3 mt-1"></i>
                        <span class="text-gray-400">北京市海淀区中关村南大街5号</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
            <p>© 2025 科普小站 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<!-- 成功提交模态框 -->
<div id="success-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 transform scale-95 transition-transform duration-300">
        <div class="text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-500 mb-4">
                <i class="fa fa-check text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">反馈提交成功</h3>
            <p class="text-gray-600 mb-6">感谢您的反馈，我们将尽快处理并回复您。</p>
            <button id="close-success-modal" class="btn-primary">
                确定
            </button>
        </div>
    </div>
</div>

<script>
    // 移动端菜单控制
    document.getElementById('menu-toggle').addEventListener('click', function() {
        document.getElementById('mobile-menu').classList.remove('translate-x-full');
    });

    document.getElementById('menu-close').addEventListener('click', function() {
        document.getElementById('mobile-menu').classList.add('translate-x-full');
    });

    // 反馈类型选择
    document.querySelectorAll('.feedback-option').forEach(option => {
        option.addEventListener('click', function() {
            // 移除其他选项的选中状态
            document.querySelectorAll('.feedback-option').forEach(opt => {
                opt.classList.remove('feedback-option-selected');
            });

            // 添加当前选项的选中状态
            this.classList.add('feedback-option-selected');

            // 设置隐藏字段的值
            const type = this.getAttribute('data-type');
            document.getElementById('feedback-type-input').value = type;
        });
    });

    // 表单提交处理
    document.getElementById('feedback-form').addEventListener('submit', function(e) {
        e.preventDefault();

        // 检查是否选择了反馈类型
        const feedbackType = document.getElementById('feedback-type-input').value;
        if (!feedbackType) {
            alert('请选择反馈类型');
            return;
        }

        // 检查反馈详情是否为空
        const details = document.getElementById('feedback-details').value.trim();
        if (!details) {
            alert('请填写反馈详情');
            return;
        }

        // 显示加载状态
        const submitButton = this.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>提交中...';

        // 模拟API请求延迟
        setTimeout(() => {
            // 显示成功模态框
            const modal = document.getElementById('success-modal');
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modal.querySelector('div').classList.remove('scale-95');
            modal.querySelector('div').classList.add('scale-100');

            // 重置表单
            this.reset();
            document.querySelectorAll('.feedback-option').forEach(opt => {
                opt.classList.remove('feedback-option-selected');
            });

            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        }, 1500);
    });

    // 关闭成功模态框
    document.getElementById('close-success-modal').addEventListener('click', function() {
        const modal = document.getElementById('success-modal');
        modal.querySelector('div').classList.remove('scale-100');
        modal.querySelector('div').classList.add('scale-95');

        setTimeout(() => {
            modal.classList.add('opacity-0', 'pointer-events-none');
        }, 300);
    });

    // FAQ折叠面板
    document.querySelectorAll('.faq-toggle').forEach(toggle => {
        toggle.addEventListener('click', function() {
            const content = this.nextElementSibling;
            const icon = this.querySelector('i');

            // 切换内容显示状态
            content.classList.toggle('hidden');

            // 切换图标旋转
            if (content.classList.contains('hidden')) {
                icon.classList.remove('rotate-180');
            } else {
                icon.classList.add('rotate-180');
            }
        });
    });

    // 滚动动画
    function checkScroll() {
        const sections = document.querySelectorAll('.section-fade-in');

        sections.forEach(section => {
            const sectionTop = section.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            if (sectionTop < windowHeight * 0.85) {
                section.classList.add('section-visible');
            }
        });
    }

    // 初始检查
    checkScroll();

    // 滚动时检查
    window.addEventListener('scroll', checkScroll);
</script>
</body>
</html>
